<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-26 14:25:02
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-28 09:30:58
 * @FilePath: \shangyitong\src\pages\user\order\allOrder\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<!-- 展示全部订单的结构 -->
	<el-card style="width: calc(100% - 10px)">
		<template #header>
			<div class="card-header">
				<span>挂号订单</span>
			</div>
		</template>
		<!-- 提供用户选择的下拉菜单 -->
		<el-form ref="form" label-width="80px" :inline="true">
			<el-form-item label="就诊人">
				<el-select
					v-model="params.patientId"
					placeholder="请选择就诊患者"
					size="small"
					style="width: 240px"
                    clearable
				>        <el-option label="全部就诊人" value="-1"></el-option>
                        <el-option
                            v-for="item in userInfoOption"
                            :key="item.id"
                            :label="item.label"
                            :value="item.value"
                        />
				</el-select>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select
					v-model="params.orderStatus"
					placeholder="请选择订单状态"
					size="small"
					style="width: 240px"
                    clearable
				>
                    <el-option label="全部订单" value="-2"></el-option>
					<el-option
						v-for="item in orderStatusOptions"
						:key="item.index"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</el-form-item>
		</el-form>
		<div class="table">
			<el-table
				:data="tableData"
				style="width: 100%"
				border
				align="center"
			>
				<el-table-column
					prop="reserveDate"
					label="就诊时间"
					width="180"
					align="center"
				/>
				<el-table-column
					show-overflow-tooltip
					prop="hosname"
					label="医院"
					width="180"
					align="center"
				/>
				<el-table-column
					prop="depname"
					label="科室"
					align="center"  
					show-overflow-tooltip
				/>
				<el-table-column prop="title" label="医生" align="center" />
				<el-table-column
					prop="amount"
					label="医事服务费"
					align="center"
				/>
				<el-table-column
					prop="patientName"
					label="就诊人"
					align="center"
				/>
				<el-table-column
					show-overflow-tooltip
					label="订单状态"
					align="center"
				>
					<template #="{ row}">
						<el-tag type="success" v-show="row.orderStatus == 1">
							{{ row.param.orderStatusString }}</el-tag
						>
						<el-tag type="warning" v-show="row.orderStatus == 0">
							{{ row.param.orderStatusString }}</el-tag
						>
						<el-tag type="danger" v-show="row.orderStatus == -1">
							{{ row.param.orderStatusString }}</el-tag
						>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #="{ row }">
						<el-button type="text" @click="goDetail(row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="pageNav">
			<el-pagination
				v-model:current-page="pageInfo.pageNo"
				v-model:page-size="pageInfo.limit"
				:page-sizes="[10, 20, 30, 40]"
				size="small"
				background
				layout="  prev, pager, next, jumper,->,sizes,total,"
				:total="pageInfo.total"
				@size-change="sizeChange"
				@current-change="getTablData"
			/>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted ,watch} from 'vue'
import { reqOrderInfo,reqUserAll,reqOrderStatus } from '@/api/user/index'
import type { OrderInfoResponseData, OrderDataInfo,UserInfoDataResponseData,OrderStatusResponseData} from '@/api/user/type'
import {useRouter } from 'vue-router'
let $router = useRouter()
//定义分页器数据
let pageInfo = reactive({
	pageNo: 0,
	limit: 10,
	total: 0,
})
//定义查询参数
let params = ref<any>({
    //就诊人ID
	patientId:"-1",
    //订单状态
	orderStatus:"-2",
})
let tableData = ref<OrderDataInfo[]>([])
//定义就诊人下拉选项
let userInfoOption = ref<any>([])
let orderStatusOptions = ref<any>([])
onMounted(() => {
	getTablData()
    getUserAll()
getOrderStatus()
    
})
//  
const getTablData = async (pages = 1) => {
    pageInfo.pageNo = pages
	let result: OrderInfoResponseData = await reqOrderInfo(
		pageInfo.pageNo,
		pageInfo.limit,
		params.value.patientId=="-1"?'':params.value.patientId,
		params.value.orderStatus=="-2"?'':params.value.orderStatus,
	)
	if (result.code == 200) {
		tableData.value = result.data.records
		pageInfo.total = result.data.total
	}
}
const sizeChange = (value: number) => {
	pageInfo.limit = value
	getTablData()
}
//详情按钮事件回调
const goDetail=(row:any)=>{
    $router.push({
        path:'/user/order',
        query:{
            orderId:row.id
        }
    })
}
//获取所有用户
const getUserAll = async()=>{
   let result:UserInfoDataResponseData= await reqUserAll()
   if(result.code==200){
    userInfoOption.value = result.data.map((item:any)=>{
        return{
            id:item.id,
            label:item.name,
            value:item.id
        }
    })
    // userInfoOption.value.unshift({
    //     id:`${Math.random()*1}`,
    //     label:"全部就诊人",
    //     value:-1
    // })
   }
}
const getOrderStatus = async()=>{
    let result:OrderStatusResponseData = await reqOrderStatus()
    if(result.code==200){
        orderStatusOptions.value = result.data.map((item,index)=>{
            return{
                id:index,
                label:item.comment,
                value:item.status
            }
        })
        // orderStatusOptions.value.unshift({
        // id:`${Math.random()*1}`,
        // label:"全部订单",
        // value:-2
        // })
    }
}
//@ts-ignore
watch(params, (newVal, oldVal) => {
    params.value.patientId = newVal.patientId;
    params.value.orderStatus = newVal.orderStatus;
    getTablData()
  
}, { deep: true });
</script>

<style lang="scss" scoped>
::v-deep(.el-card__header) {
	padding: 8px;
}
::v-deep(.el-card__body) {
	padding: 8px;
}
.table {
	max-height: 670px;
	overflow: auto;
}
.pageNav {
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 2px 4px 9px 0px;
	padding: 5px;
	background-color: white;
	width: 48%;
	margin: 8px 0;
	position: fixed;
	bottom: 57px;
}
</style>
